<html>
	<head>
		<!-- 引入 Swiper CSS -->
		<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
		<!-- 引入 Swiper JS -->
		<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
		<style>
			body {
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #65805e;
			}

			.swiper-box {
				position: absolute;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				gap: 20px;
				background: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 100%);
				backdrop-filter: blur(30px);
				border-radius: 20px;
				box-shadow: 0 0.5px 0 1px rgba(255, 255, 255, 0.23) inset, 0 1px 0 0 rgba(255, 255, 255, 0.66) inset, 0 4px 16px rgba(0, 0, 0, 0.12);
				z-index: 10;
				padding: 10px 30px;
			}

			.swiper {
				width: 210px;
				height: 300px;
				padding: 20px;
			}

			.swiper-slide {
				position: relative;
				border-radius: 10px;
				user-select: none;
				box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
			}

			.swiper-slide img {
				position: absolute;
				inset: 0;
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
			.sub-swiper{
				width: 320px;
				
			}
			.subbg{
				display: grid;
				gap: 10px;
				box-shadow: none;
			}
			h1{
				color: #fff;
				margin-bottom: 5px;
				font-family: 'Maple Mone CN SemiBold' ,serif;
				font-weight: 400;
			}
			.year,
			.actor,
			.cate,
			.time{
				display: flex;
				align-items: center;
				gap: 15px;
				color: #292626;
			}
			.tag{
				color:#fff;
				padding: 1px 7px;
				font-size: 13px;
				border-radius: 5px;
			}
			.describ{
				height: 100px;
				overflow: auto;
				font-size: 15px;
				color: #fff;
				-ms-overflow-style: none;
				scrollbar-width: none;
			}
			.describ::-webkit-scrollbar{
				display: none;
			}
			.overlay{
				position: absolute;
				inset: 0;
				width: 100%;
				height: 100%;
				background: linear-gradient(to top,#0f2027,transparent,transparent);
				background-repeat: no-repeat;
				background-size: cover;
			}	
			.overlay h2{
				position: absolute;
				bottom: 0;
				left: 0;
				color: #fff;
				font-weight: 400;
				font-size: 1.1rem;
				line-height: 1.4;
				margin: 0 0 20px 20px;
			}
			.swiper-pagination{
				transform: translateY(10px);
			}
		</style>
	</head>
	<body>
		<div class="swiper-box">
			<div class="swiper main-swiper">
				<!-- 一个框为一部电影的海报 -->
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.Icsied0HSS5YbyKKP7kDHwHaNK?cb=iwc2&rs=1&pid=ImgDetMain"
							alt="" />
						<div class="overlay">
							<h2>黑客帝国</h2>
						</div>
					</div>
					<div class="swiper-slide">
						<img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.3vN88r7hCrYG33J2aTPPmAHaNK?cb=iwc2&rs=1&pid=ImgDetMain"
							alt="" />
						<div class="overlay">
							<h2>智哥摸摸鱼</h2>
						</div>
					</div>
					<div class="swiper-slide">
						<img src="https://ts1.tc.mm.bing.net/th/id/R-C.6d8a57256ba630185743ba8557f4ed14?rik=VldXaSQLI8%2bObA&riu=http%3a%2f%2fimage.yjcf360.com%2fu%2fcms%2fwww%2f201904%2f120850581kxr.jpg&ehk=WNEMqv9m%2f6G74rn9TCLdjOYquj4EU%2bdDYDxY6yE9Q8E%3d&risl=&pid=ImgRaw&r=0"
							alt="" />
						<div class="overlay">
							<h2>打开的的</h2>
						</div>
					</div>
					<div class="swiper-slide">
						<img src="https://ts1.tc.mm.bing.net/th/id/R-C.db716bab773bd3921c086a6e0c86479d?rik=Zq1r1aP%2b9qZJ4w&riu=http%3a%2f%2fimage.yjcf360.com%2fu%2fcms%2fwww%2f201801%2f25142550ok0b.jpg&ehk=bHtGPetUIZEikosFG3QtdaUUsIJbd48paoWEPQ%2fwxCc%3d&risl=&pid=ImgRaw&r=0"
							alt="" />
						<div class="overlay">
							<h2>打款肯定了</h2>
						</div>
					</div>
					<div class="swiper-slide">
						<img src="https://ts1.tc.mm.bing.net/th/id/R-C.4a0fede89a16c6090019a795bd819c49?rik=EU7yTGWsjl7oMg&riu=http%3a%2f%2fimage.yjcf360.com%2fu%2fcms%2fwww%2f201803%2f28142945iyvn.jpg&ehk=QAS%2fX6MNmZtalhZG0Nx3fu6xrNsNnR0FCEOB6GOQc%2b0%3d&risl=&pid=ImgRaw&r=0"
							alt="" />
						<div class="overlay">
							<h2>疯狂搞事情</h2>
						</div>
					</div>
				</div>

				<div class="swiper-pagination"></div>
			</div>
			<div class="swiper sub-swiper">
				<div class="swiper-wrapper">
					<div class="swiper-slide subbg">
						<h1>黑客帝国</h1>
					
						<div class="year">
							<span class="tag">年份</span>
							<span>1999</span>
						</div>
						<div class="actor">
							<span class="tag"">主演</span>
							<span>基努·李维斯</span>
						</div>
						<div class="cate">
							<span class="tag"">地区</span>
							<span>美国·动作 / 科幻</span>
						</div>
						<div class="time">
							<span class="tag"">时长</span>
							<span>2 小时 16分</span>
						</div>
						<div class="describ">
							<span>发撒法的肌肤的拉伸课程安分守己的空发撒法的肌肤的拉伸课程安分守己的空间法案安航发撒法的肌肤的拉伸课程安分守己的空间法案安航发撒法的肌肤的拉伸课程安分守己的空间法案安航发撒法的肌发撒法的肌肤的拉伸课程安分守己的空间法案安航发撒法的肌肤的拉伸课程安分守己的空间法案安航发撒法的肌肤的拉伸课程安分守己的空间法案安航发撒法的肌肤的拉伸课程安分守己的空间法案安航发撒法的肌肤的拉伸课程安分守己的空间法案安航肤的拉伸课程安分守己的空间法案安航间法案安航空支持卡卡发</span>
						</div>
					</div>
					<div class="swiper-slide subbg">
						<h1>黑客帝国</h1>
					
						<div class="year">
							<span class="tag">年份</span>
							<span>1999</span>
						</div>
						<div class="actor">
							<span class="tag"">主演</span>
							<span>基努·李维斯</span>
						</div>
						<div class="cate">
							<span class="tag"">地区</span>
							<span>美国·动作 / 科幻</span>
						</div>
						<div class="time">
							<span class="tag"">时长</span>
							<span>2 小时 16分</span>
						</div>
						<div class="describ">
							<span>发撒法的肌肤的拉伸课程安分守己的空发撒法的肌肤的拉伸课程安分守己的空间法案安航发撒法的肌肤的拉伸课程安分守己的空间法案安航发撒法的肌肤的拉伸课程安分守己的空间法案安航发撒法的肌发撒法的肌肤的拉伸课程安分守己的空间法案安航发撒法的肌肤的拉伸课程安分守己的空间法案安航发撒法的肌肤的拉伸课程安分守己的空间法案安航发撒法的肌肤的拉伸课程安分守己的空间法案安航发撒法的肌肤的拉伸课程安分守己的空间法案安航肤的拉伸课程安分守己的空间法案安航间法案安航空支持卡卡发</span>
						</div>
					</div>
					<div class="swiper-slide subbg">
						<h1>黑客帝国</h1>
					
						<div class="year">
							<span class="tag">年份</span>
							<span>1999</span>
						</div>
						<div class="actor">
							<span class="tag"">主演</span>
							<span>基努·李维斯</span>
						</div>
						<div class="cate">
							<span class="tag"">地区</span>
							<span>美国·动作 / 科幻</span>
						</div>
						<div class="time">
							<span class="tag"">时长</span>
							<span>2 小时 16分</span>
						</div>
						<div class="describ">
							<span>发撒法的肌肤的拉伸课程安分守己的空发撒法的肌肤的拉伸课程安分守己的空间法案安航发撒法的肌肤的拉伸课程安分守己的空间法案安航发撒法的肌肤的拉伸课程安分守己的空间法案安航发撒法的肌发撒法的肌肤的拉伸课程安分守己的空间法案安航发撒法的肌肤的拉伸课程安分守己的空间法案安航发撒法的肌肤的拉伸课程安分守己的空间法案安航发撒法的肌肤的拉伸课程安分守己的空间法案安航发撒法的肌肤的拉伸课程安分守己的空间法案安航肤的拉伸课程安分守己的空间法案安航间法案安航空支持卡卡发</span>
						</div>
					</div>
					<div class="swiper-slide subbg">
						<h1>黑客帝国</h1>
					
						<div class="year">
							<span class="tag">年份</span>
							<span>1999</span>
						</div>
						<div class="actor">
							<span class="tag"">主演</span>
							<span>基努·李维斯</span>
						</div>
						<div class="cate">
							<span class="tag"">地区</span>
							<span>美国·动作 / 科幻</span>
						</div>
						<div class="time">
							<span class="tag"">时长</span>
							<span>2 小时 16分</span>
						</div>
						<div class="describ">
							<span>发撒法的肌肤的拉伸课程安分守己的空发撒法的肌肤的拉伸课程安分守己的空间法案安航发撒法的肌肤的拉伸课程安分守己的空间法案安航发撒法的肌肤的拉伸课程安分守己的空间法案安航发撒法的肌发撒法的肌肤的拉伸课程安分守己的空间法案安航发撒法的肌肤的拉伸课程安分守己的空间法案安航发撒法的肌肤的拉伸课程安分守己的空间法案安航发撒法的肌肤的拉伸课程安分守己的空间法案安航发撒法的肌肤的拉伸课程安分守己的空间法案安航肤的拉伸课程安分守己的空间法案安航间法案安航空支持卡卡发</span>
						</div>
					</div>
					<div class="swiper-slide subbg">
						<h1>黑客帝国</h1>
					
						<div class="year">
							<span class="tag">年份</span>
							<span>1999</span>
						</div>
						<div class="actor">
							<span class="tag"">主演</span>
							<span>基努·李维斯</span>
						</div>
						<div class="cate">
							<span class="tag"">地区</span>
							<span>美国·动作 / 科幻</span>
						</div>
						<div class="time">
							<span class="tag"">时长</span>
							<span>2 小时 16分</span>
						</div>
						<div class="describ">
							<span>发撒法的肌肤的拉伸课程安分守己的空发撒法的肌肤的拉伸课程安分守己的空间法案安航发撒法的肌肤的拉伸课程安分守己的空间法案安航发撒法的肌肤的拉伸课程安分守己的空间法案安航发撒法的肌发撒法的肌肤的拉伸课程安分守己的空间法案安航发撒法的肌肤的拉伸课程安分守己的空间法案安航发撒法的肌肤的拉伸课程安分守己的空间法案安航发撒法的肌肤的拉伸课程安分守己的空间法案安航发撒法的肌肤的拉伸课程安分守己的空间法案安航肤的拉伸课程安分守己的空间法案安航间法案安航空支持卡卡发</span>
						</div>
					</div>
				</div>
			</div>
		</div>

		<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/9.0.0/swiper-bundle.min.js"></script>
		<script>
			const subSwiper=new Swiper(".sub-swiper",{
				allowTouchMove: false,
				loop:true,
				effect:"fade",
				fadeEffect:{
					crossFade:true
				}
			});
			
			const mainSwiper=new Swiper(".main-swiper",{
				effect:"cards",
				grabCursor: true,
				initialSlide: 2,
				loop: true,
				mousewheel:{
					invert:false,
				},
				pagination:{
					el:".swiper-pagination",
				},
				autoplay:{
					delay:3000,
					disableOnInteraction:false,
				},
				thumbs:{
					swiper:subSwiper,
				}
			});
			const coloritems=document.querySelectorAll('.tag');
			
			const colors=["#f35a5a","#f89e37","#3a77fa","#27c263"];
			
			coloritems.forEach((element,index)=>{
				const colorindex=index % colors.length;
				element.style.backgroundColor=colors[colorindex];
			});
		</script>
	</body>
</html>